Hello and welcome.
In this video we are going to create a project directory and also the hastier mail for the project.
I am using a Windows 7 machine to created directory.
I will do that on the desktop just by right clicking on in the blank space am going to new and click
on falder you can do the same if you are using a Mac and just give your Directory any name and when
to call mine quote
of the day.
Feel free to call yours whatever name you like.
So that's my directory created.
I've called it quote of the day.
Next in I want to do is create the hastier mill document.
I want to use.
I am going to be using sublime text as my editor.
So I've opened up a new file and am going to save this file has an agent email document and one leg
say Abbas and I'll be saving it inside the projet directory here.
Han I'm just going to call these quotes
quotes dot hastey mill.
He can see is also hate mail listed here.
So can a colleague say.
So this file now is going to be an hastier mail.
Far I have already restaged to code.
I'm just going to copy that in and then explain.
Line by line.
Be a lot easier and more efficient for me to explain it this way.
So this is the hastier mail for the project so I'm going to explain the code line by line.
Line one here is what is referred to as the dog type.
So the very first thing you have to indicate in a template document the doctype is not part of the actual
document.
It is a declaration basically telling the web browsers that the content of this farm is going to be
hastier Mail 5 line 2 is where the highest here mail begins and it ends on line 25.
So any content between line two and line 25 is regarded as the hastier mount element.
So we've got the head section here.
You can see this head tag here.
That's the open head tag and that's close and head back inside the head type basically is where you
have things like style sheet.
You have met attacks and so on.
So they're just for informational and reference purposes to here online for quite a reference.
Which is a link to an external alstyle sheet.
I will be using it for this project.
I have not created a file yet but when I do I am going to call the quartz that csx And this is the reference.
This is waitzkin going to be it's going to be in the same directory.
Has this system fast or this is just a link.
You can see a real here.
This real basically is an attribute and tells anything green here.
Attribute you can see here tells you also what type it is going to be a text and is going to be a success
FAQ line 5.
Here's where the head in tack ends the body begins on line 6 and end on line twenty three.
Any content inside the body tag is what is going to be visible to the user.
So inside the body type of quoted dph so deep physically deficient you can divide a section of the page.
Inside it is where I want to quote to be rendered.
OK so here have given it head in line 9.
It's a head it's going to be ahead in time.
It's going to be quiet of the day that's to close and tag it.
Opening a tag line 10 is just going to be a paragraph that all displays some text telling the user to
press the button below to receive a random quote line 12 defining the button see thus opening thus closing
tag.
When you define the button you have to attach an event that took it basically a button.
What you do with a button you click on it.
So this click event will handle the event of the click.
When we click on the.
Button Miss unclick mentality here will reference this poor this metate have set the clock to of course
this matter is going to be a job as a group method of function that I will be defining later inside
my javascript FAQ.
So when you click on the button it will call this function and the code inside that function will respond
to the click.
And this is just a text that will be displayed on the button that will see you click on new quotes or
new quote here.
Not that deep inside the main Dave.
Dave here this minute Dave I am 13 to 17 is where we are going to render the quote.
So we've got two paragraphs here with 10 ideas.
Core quart output that means that were going to output the results so when the user clicks on the button
it'll generate around them quote and display the code inside base paragraph.
Here are like 16.
We've also got off an idea called output.
This again is a paragraph and the name of the author is going to be displayed in a separate line.
Inside this paragraph.
These are comments.
This is how you write comments in his mail.
So anything I've got to comment on will be ignored when the code actually executes.
So this is close indeed.
For this.
And online a team we've caught a script on line 21.
What is script tag and you notice you got declares RC attribute.
Politically this is this source.
So I am referencing an external javascript far so the actual quotes that will be generated are going
to be located inside this javascript FAQ.
I have not created it yet when I do I am going to call it quotes Jesus and is going to be in the same
directory as my hishe to me.
So far so hands have just done quotes s because he is going to be in the same direction.
So this is basically the hastier mail for the application.
Got a reference to externals here are still javascript which will create a tap and also a reference
to external csx.
So that is it for this show.
I'm just going to click on the file option and click save.
Or we can quickly run this so we can see what the structure looks like.
So to run it open up the directory which is this one.
In my case I am just going to click on this page TMF file and it should give us the current structure.
Oh it looks like so this is what it looks like at the moment.
We haven't got any CFS but this is the button.
So the idea is to click on the button and it will generate a random quote.
So yeah if you got your page looking like it's well done means we are on the same page.
So that's it for this lecture.
Thank you for watching.
Bye.